import React, { useContext } from "react";
import Navbar from "../../components/Navbar/Navbar";
import classes from "./Date.module.css";
import WriteList from "../../components/MyDate/WriteList";
import ThemeContext from "../../store/themeContext";
export default function Date() {
    const ctx = useContext(ThemeContext);
    const data = [
        {
            name: "Bill Payment",
            money: 200,
            consumptionTime: "3 Jun 2020",
            writeTime: "26 May 2020",
        },
        {
            name: "Car Loan",
            money: 600,
            consumptionTime: "11 July 2020",
            writeTime: "29 July 2020",
        },
        {
            name: "Iphone 12 Pro",
            money: 400,
            consumptionTime: "3 Aug 2020",
            writeTime: "29 July 2020",
        },
        {
            name: "New Bike",
            money: 300,
            consumptionTime: "12 Sep 2020",
            writeTime: "26 Aug 2020",
        },
    ];
    return (
        <div className={classes.reminders} style={{ backgroundColor: ctx.theme === "light" ? "#fdfdfe" : "#121212" }}>
            <header>
                <Navbar linkName={"Reminders"} />
            </header>
            <ul>
                {data.map((item, index) => (
                    <WriteList item={item} key={index} />
                ))}
            </ul>
        </div>
    );
}
